<template>
  <div ref="chart" :style="{ width: '100%', height: '300px' }"></div>
</template>

<script setup lang="ts">
import { now } from '@vueuse/core'
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue'

// 创建 Dom 引用
const chart = ref()

// 参数
const props = defineProps({
  chartType: {
    type: String,
    default: 'candlestick',
  },
  chartData: {
    type: Array,
  },
})

// 类型
let chartType = ''
// 数据
const chartData = ref([
  ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
  ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
  ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
  ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
  ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
  ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
  ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
  ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
  ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
  ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
  ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
])

let myChart: echarts.ECharts

// K线颜色
const upColor = '#ec0000'
const upBorderColor = '#8A0000'
const downColor = '#00da3c'
const downBorderColor = '#008F28'

onMounted(() => {
  init()
})
onUnmounted(() => {
  echarts.dispose
})

// 数据分拆为序列和值
function splitData(rawData: (number | string)[][]) {
  const categoryData = []
  const values = []
  for (var i = 0; i < rawData.length; i++) {
    categoryData.push(rawData[i].splice(0, 1)[0])
    values.push(rawData[i])
  }
  return {
    categoryData: categoryData,
    values: values,
  }
}
let xaxis: any[]
let seriesData: any

const option = () => {
  return {
    title: {
      text: '上证指数',
      left: 0,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {
      data: ['日K'],
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%',
    },
    xAxis: {
      type: 'category',
      data: xaxis, // X 轴数据
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax',
    },
    yAxis: {
      scale: true,
      splitArea: {
        show: true,
      },
    },
    dataZoom: [
      {
        type: 'inside',
        start: 50,
        end: 100,
      },
      {
        show: true,
        type: 'slider',
        top: '90%',
        start: 50,
        end: 100,
      },
    ],
    series: [
      {
        name: '日K',
        type: chartType, // 图表类型
        data: seriesData, // 图表数据
        itemStyle: {
          color: upColor,
          color0: downColor,
          borderColor: upBorderColor,
          borderColor0: downBorderColor,
        },
      },
    ],
  }
}

function init() {
  if (props.chartData) {
    // 传数据进来
    chartData.value = props.chartData as [[]]
  }
  if (props.chartType) {
    chartType = props.chartType
  }
  const tmpData = splitData(chartData.value) as { categoryData: []; values: [[]] }
  xaxis = tmpData.categoryData
  seriesData = tmpData.values
  // myChart 声明**不能**放在函数外
  myChart = echarts.init(chart.value, 'dark')

  // 把配置和数据放这里
  myChart.setOption(option())
  window.onresize = function() {
    //自适应大小
    myChart.resize()
  }
}

function addData() {
  xaxis.push(now())
  seriesData.push([2320.26, 2320.26, 2287.3, 2362.94])
}

const timer = setInterval(function() {
  addData()
  myChart.setOption({
    xAxis: {
      data: xaxis,
    },
    series: [
      {
        data: seriesData,
      },
    ],
  })
}, 5000)

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style scoped></style>
